import React from 'react'
import PropTypes from 'prop-types'
import {Table, Tooltip} from 'antd'
import classnames from 'classnames'
import {Link} from 'react-router-dom'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './List.less'

const List = ({
  onDeleteItem, onLeaveItem, onEditItem, showDiscoveries, isMotion, location, ...tableProps
}) => {

  const columns = [
    {
      title: '好友微信号',
      dataIndex: 'dcustomerWxId',
      key: 'dcustomerWxId',
    }, {
      title: '好友微信昵称',
      dataIndex: 'customerWxNickname',
      key: 'customerWxNickname',
      // render: val => val ? <Link to={''}>{val}</Link> : '',
    }, {
      title: '归属微信号',
      dataIndex: 'operatorWx',
      key: 'operatorWx.wxId',
      render: val => val ? val.wxNo || val.wxId : "-",
      width: 120,
    }, {
      title: '归属微信昵称',
      dataIndex: 'operatorWx.nickname',
      key: 'operatorWx.nickname',
    }, {
      title: '归属员工',
      dataIndex: 'operatorWx',
      key: 'operatorWx.belongEmpName',
      render: operatorWx => operatorWx ? operatorWx.belongEmpName : "-",
    }, {
      title: '公司部门',
      dataIndex: 'operatorWx',
      key: 'operatorWx.deptName',
      render: operatorWx => operatorWx ? operatorWx.deptName : "-",
    }, {
      title: '文本内容',
      dataIndex: 'textContent',
      key: 'textContent',
      render: val => val ? <Tooltip title={val}>{val ? val.length > 30 ? val.substr(0, 30) + '...' : val: ''}</Tooltip> : '图片/视频内容',
      width: 350,
    }, {
      title: '图片视频链接内容',
      key: 'mediaContent',
      render: (value, record) => <a href="javascript:;" onClick={() => { showDiscoveries(record)}}>详情</a>,
    }, {
      title: '地理位置',
      dataIndex: 'geoLocation',
      key: 'geoLocation',
      render: val => val ? val : '-',
    }, {
      title: '发布时间',
      dataIndex: 'releaseTime',
      key: 'releaseTime',
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Table
      {...tableProps}
      className={classnames(styles.table, { [styles.motion]: isMotion })}
      scroll={{ x: 1400 }}
      columns={columns}
      simple
      rowKey={record => record.id}
      components={{
        body: { wrapper: isMotion ? AnimateBody : CommonBody },
      }}
    />
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  isMotion: PropTypes.bool,
  location: PropTypes.object,
}

export default List
